<template>
	<view>
		<image class="page-bg" src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-vatr-1.png"
			mode="widthFix"></image>
		<!-- 自定义头部start -->
		<customHeader title="乡村旅游"></customHeader>
		<!-- 行政村和自然村数量 -->
		<view class="vallige-num-wrap u-flex">
			<div class="item">
				<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/vallige/icon-1.png"
					mode="widthFix"></image>
				<text class="u-font-24">行政村</text>
				<text class="green">{{ administrative }}</text>
			</div>
			<div class="item u-m-l-20">
				<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/vallige/icon-2.png"
					mode="widthFix"></image>
				<text class="u-font-24">自然村</text>
				<text class="green">{{ nature }}</text>
			</div>
		</view>
		<!-- 搜索 -->
		<view class="search-wrap">
			<u-search search-icon="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/vallige/icon-search.png"
				placeholder="请输入乡村名称" :show-action="false" height="90" bg-color="#fff" v-model="keyword"
				@search='onSearch'></u-search>
		</view>
		<!-- 自定义头部end -->
		<view class="page-wrap">
			<u-dropdown active-color="#07C160">
				<u-dropdown-item v-model="value" :title="options[value].label" :options="options"
					@change='onChange'></u-dropdown-item>
			</u-dropdown>
			<scroll-view scroll-y class="list">
				<template v-for="item in villages_index_list">
					<navigator :url="`/pages/vallige-travel/detail?id=${item.id}`" class="item">
						<div class="left">
							<view class="u-flex">
								<text class="u-font-34 blod u-m-r-20">{{ item.name }}</text>
							</view>
							<view class="u-font-24 u-content-color u-m-t-15">{{ item.principal_job }} |
								{{ item.principal_name }}
							</view>
							<view class="u-font-24 u-content-color u-m-t-15 u-line-2">
								{{ item.address }}
							</view>
							<view class="u-flex see-like-wrap">
								<div class="item2">
									<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/icon-view.png"
										mode="widthFix"></image>
									<text>{{ item.watch }}</text>
								</div>
								<div class="item2 u-m-l-10">
									<image src="https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/icon-like.png"
										mode="widthFix"></image>
									<text>{{ item.praise }}</text>
								</div>
							</view>
						</div>
						<u-image border-radius="20rpx"
							:src="item.thumbnail == '' ? 'https://wxcode.sowreap.cn/nongmuWeChatImage/static/images/dongtu/img-wl-2.png' : item.thumbnail"
							width="230rpx" height="230rpx"></u-image>
					</navigator>
				</template>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import customHeader from '@/components/customHeader.vue'
	export default {
		components: {
			customHeader
		},
		data() {
			return {
				keyword: '',
				value: 0,
				options: [{
						label: '余江全域',
						value: 0,
					},
					{
						label: '行政村',
						value: 1,
					},
					{
						label: '自然村',
						value: 2,
					}
				],

				administrative: '', //行政乡村总数
				nature: '', //自然乡村总数

				villages_index_list: [], //风采余江列表

				flag: false,
			}
		},
		onLoad() {
			// 乡村统计
			this.get_villages_statistics();

			// 风采余江列表
			this.get_villages_index();
		},
		onPullDownRefresh() {
			// 乡村统计
			this.get_villages_statistics();

			// 风采余江列表
			this.get_villages_index();
		},
		methods: {
			// 乡村统计
			get_villages_statistics() {
				uni.showLoading({
					title: '加载中...'
				});
				this.$http({
					url: this.api.villages_statistics,
					method: 'GET',
				}).then(res => {
					// console.log(res, '乡村统计');
					if (res.code == 1) {
						uni.hideLoading();
						uni.stopPullDownRefresh();
						this.administrative = res.data.administrative;
						this.nature = res.data.nature
					}
				})
			},

			// 风采余江列表
			get_villages_index(data, e) {
				uni.showLoading({
					title: '加载中...'
				});
				this.$http({
					url: this.api.villages_index,
					method: 'GET',
					data: data
				}).then(res => {
					// console.log(res, '风采余江列表');
					if (res.code == 1) {
						uni.hideLoading();
						uni.stopPullDownRefresh();
						this.villages_index_list = res.data.list
						if (e == 1) {
							// 行政村
							this.villages_index_list = this.villages_index_list.filter(el => el.village_type == 1);
						} else if (e == 2) {
							//自然村
							this.villages_index_list = this.villages_index_list.filter(el => el.village_type == 2);
						} else if (e == 0) {
							this.villages_index_list = res.data.list
						}
					}
				})
			},

			// 搜索
			onSearch() {
				let data = {
					area: this.keyword
				}
				this.get_villages_index(data)
			},

			onChange(e) {
				console.log(e, '下拉框选中的change事件');
				this.get_villages_index('', e)
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-bg {
		position: relative;
		width: 750rpx;
		height: 560rpx;
		z-index: 1;
	}

	.vallige-num-wrap {
		position: absolute;
		top: 334rpx;
		left: 125rpx;
		z-index: 2;

		.item {
			width: 240rpx;
			height: 50rpx;
			background: rgba(255, 255, 255, 0.85);
			box-shadow: 0px 0px 10rpx 1px rgba(0, 0, 0, 0.4);
			border-radius: 25rpx;
			display: grid;
			grid-template-columns: 40rpx 72rpx auto;
			gap: 0 8rpx;
			align-items: center;
			padding: 0 5rpx;

			image {
				width: 40rpx;
				height: 40rpx;
			}

		}
	}

	.search-wrap {
		width: 690rpx;
		height: 90rpx;
		border-radius: 90rpx;
		background: #fff;
		margin: 0 auto;
		margin-top: -80rpx;
		position: relative;
		z-index: 2;
	}

	/deep/ .u-icon-wrap {
		width: 40%;
		justify-content: flex-end;
	}

	.page-wrap {
		width: 690rpx;
		margin: 0 auto;
		margin-top: 30rpx;
		border-top-left-radius: 15rpx;
		border-top-right-radius: 15rpx;
		background-color: #fff;
		padding: 30rpx;
		position: relative;
		z-index: 2;
	}

	/deep/ .u-dropdown {
		width: 750rpx !important;
		margin-left: -30rpx;
	}

	/deep/ .u-dropdown__menu__item {
		justify-content: flex-start !important;
		font-size: 28rpx;
		font-weight: 700;
		padding-left: 30rpx;
	}

	.list {
		width: 100%;
		height: calc(100vh - 780rpx);

		.item {
			width: 100%;
			background: #F3F3F3;
			border-radius: 10rpx;
			position: relative;
			display: flex;
			padding: 20rpx;
			margin-bottom: 30rpx;
			box-sizing: border-box;

			.left {
				margin-right: 40rpx;

				.see-like-wrap {
					margin-top: 15rpx;

					.item2 {
						width: auto;
						height: 40rpx;
						border: 1px solid #CCCCCC;
						border-radius: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						padding: 0 10rpx;

						image {
							width: 22rpx;
							height: 22rpx;
							margin-right: 10rpx;
						}
					}
				}

			}
		}
	}
</style>
<style>
	page {
		padding: 0;
	}
</style>